<h2 mat-dialog-title class="ama-variables-dialog-title">
    <mat-icon class="ama-variables-icon">layers</mat-icon>{{title | translate}}
</h2>

<mat-dialog-content class="ama-properties-content ama-variables-dialog-content" data-automation-id="variables-dialog">
    <modelingsdk-properties-viewer [filterPlaceholder]="filterPlaceholder" [properties]="editorContent"
        [filterValue]="filterValue" [types]="types" [requiredCheckbox]="requiredCheckbox" [displayedColumns]="columns"
        [allowExpressions]="allowExpressions" [allowAnalytics]="allowAnalytics" (propertyChanged)="onPropertyChanged()"></modelingsdk-properties-viewer>
</mat-dialog-content>

<mat-dialog-actions align="end">
    <p class="ama-error-message" *ngIf="!validVariables">{{ 'SDK.VARIABLES_EDITOR.ERRORS.NAME_ALREADY_EXISTS' | translate }}</p>

    <span class="adf-fill-remaining-space"></span>

    <button mat-button mat-dialog-close (click)="onClose()" data-automation-id="close-button">
        {{ 'APP.DIALOGS.CANCEL' | translate }}
    </button>

    <button [disabled]="isSaveDisabled()" class="adf-dialog-action-button studio-save-btn" color="primary" mat-button
        (click)="save()" data-automation-id="update-button">
        {{ 'APP.DIALOGS.UPDATE' | translate }}
    </button>
</mat-dialog-actions>
